<template>
   <div class="xiangqing">
          <!-- 上面部分 -->
   <header>
      <van-nav-bar
        title="详情"
        left-text="返回"
        right-text="收藏"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <!-- 店铺 信息 -->
      <!-- shopinfo.info && shopinfo.info.poi_back_pic_url 这是为了防止组件初次渲染时shopinfo是空对象,导致的报错. -->
      <div class="shop-head" :style="{ backgroundImage: `url(${ shopinfo.info && shopinfo.info.poi_back_pic_url})`}">
        <img class="logo" v-lazy="shopinfo.info && shopinfo.info.picUrl">
        <span class="name">{{shopinfo.info && shopinfo.info.name}}</span>
        <van-icon @click="collect" name="like-o"  size="20"  :class="qiang?'active':'activee'"  />
      </div>
   </header>
           <!-- 下面左边列表 -->
      <div class="box">
        <div class="left">
          <!-- 左边分类列表 -->
          <div @click="currentIndex=index" class="cate" v-for="(item,index) in shopinfo.taglist" :key="index">
                 {{item.name}}
          </div>
        </div>
         <div class="right">
        <!-- 商品列表 -->
        <div class="good" v-for="(item,index) in shopinfo.taglist && shopinfo.taglist[currentIndex].goodlist" :key="index">
          <div class="img-box">
            <img :src="item.picture" alt="">
          </div>
          <div class="text">
            <div class="name">{{item.name}}</div>
            <div class="price">{{item.min_price}}</div>
          </div>
          <div class="shu" @click="jiaru(item.id)">
              加入购物车
          </div>
        </div>
      </div>

      </div>

  <div>
  
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服"  />

      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
      <van-action-sheet v-model="show" title="标题">
        <div class="content"> <GouWu /></div>
      </van-action-sheet>
    </van-goods-action>
  </div>
  
 
   </div>
</template>

<script>
import {gouwujian,gouwuche,gouwujia} from '../../api/index'
import { shopinfo} from "../../api/index";
import { shop_fav} from "../../api/index";
import { shop_unfav} from "../../api/index";
import { Dialog } from 'vant';
import { Toast } from 'vant';
import GouWu from "./GouWu.vue"
export default {
  data(){
    return{
       currentIndex:0,
       shopinfo:{},
       shoucang:true,
       list:[],
       qiang:true,
        sczt:false,
        yinc:true,
        show: false,
    }
  },
  components:{
    GouWu
  },
  methods:{
     onClickButton() {
      this.show = true;
    },
     onClickLeft(){
      this.$router.go(-1);
    },
    onClickRight(){
      this.$router.push("/shoucang")
    },
    collect(){
       this.qiang=!this.qiang
     if(this.shoucang==true){
    // console.log(this.$route.params.id)
           console.log(this.list.mtWmPoiId)
    
            shop_fav({ shopid: this.list.mtWmPoiId, userid:localStorage.getItem("userid") }).then( (res) => {
            //  console.log(res.data);
              // item.status=!item.status
        }
       );
           Toast.success('收藏成功');
           this.shoucang=!this.shoucang
     }else{
           shop_unfav({ shopid: this.list.mtWmPoiId, userid:localStorage.getItem("userid") }).then( (res) => {
             console.log(res.data);
        }
       );
         Toast.fail('取消收藏');
           this.shoucang=!this.shoucang
     }
    },
    jiaru(id){
        gouwujia({userid:localStorage.getItem("userid"),goodid:id}).then(res=>{
          console.log(res.data)
            this. lista()
        })

    },
        lista(){
              let userid=localStorage.getItem("userid")
              this.$store.dispatch('addTask',userid)
          
        },



    
  },
  mounted(){
        Toast.loading({ duration:0 }) 
   
    shopinfo({id:this.$route.params.id}).then((res)=>{
          // id=this.$route.params.id
            Toast.clear();//关闭loading提示
      if(res.data.code==200){
        console.log(res.data.shopinfo)
        this.list=res.data.shopinfo
        this.shopinfo=res.data.shopinfo
      }else{
        // alert(res.data.msg)
        this.$router.go(-1)
         Dialog({ message: res.data.msg }).then((res)=>{
          if( res == 'confirm' ){
            this.$router.go(-1);
          }
        });
      }
    })
    
  }

}
</script>

<style scoped>

.shop-head{
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 50px 20px;
}
.shop-head img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.shop-head .name{
  color: white;
  font-size: 18px;
}
.box {
  display: flex;
}
.box .left{
  width: 120px;
  line-height: 40px;
}
.box .right .good{
  display: flex;
}
.box .right .img-box{
  width: 100px;
  margin-right: 10px;
}
.box .right .img-box img{
  width: 100%;
}
.box .right .text{
  flex:1;
}
.active{
  color: red;
}
.activee{
  color: white;
}

footer{
  width: 100%;
  height: 300px;
  background: pink;
  position: fixed;
  bottom: 0;
}
.shu{
  width: 50px;
  height: 30px;
  background: pink;
  font-size:10px ;
}
.content {
  padding: 16px 16px 400px;
}

</style>